<template>
  <view class="after_sales">
    <view class="top">
      <view class="top_line">
        <text class="leixing" v-if="orderDetail.status == 1">退款成功</text>
        <text class="leixing" v-else>退款受理中</text>
      </view>
      <view class="bottom_line" v-if="orderDetail.status == 1"
        >金额已自动退还</view
      >
      <view class="bottom_line" v-else>金额将自动退还，请耐心等待</view>
    </view>
    <view class="message_box">
      <view class="message_top">
        <view class="title">退款金额</view>
        <view class="right_box">
          <view class="price">{{ orderDetail.refund_fee }}</view>
          <view class="time" v-if="orderDetail.status == 1"
            >(退款金额已成功返回原支付账户)</view
          >
          <view class="time" v-else>(退款金额将返回原支付账户)</view>
        </view>
      </view>
      <view class="message_center">
        <view class="title">退优惠券</view>
        <view class="right_box" v-if="orderDetail.coupon_status == 1">
          您的优惠券已成功返回您的卡券包
        </view>
        <view class="right_box" v-else> 您的优惠券将返回您的卡券包 </view>
      </view>
      <view class="message_bottom">
        <view class="title">退款进度</view>
        <!-- 不同状态对应不同类名 -->
        <view :class="orderDetail.status == 1 ? 'steps_box2' : 'steps_box1'">
          <view class="process_box">
            <view class="circle_box1"> </view>
            <view class="type1">退款受理</view>
          </view>
          <view class="process_box">
            <view class="circle_box2">
              <u-icon name="checkbox-mark" color="#fff" size="30"></u-icon>
            </view>
            <view class="type2">退款入账</view>
          </view>
          <view class="xian"></view>
        </view>
      </view>
    </view>
    <view class="detail_box">
      <view
        class="center"
        v-for="(item, index) in orderDetail.item"
        :key="index"
      >
        <view class="img_box">
          <img :src="item.image" alt="" />
        </view>
        <view class="right">
          <view class="right_top">
            <view class="title">{{ item.title }}</view>
            <!-- <text class="fuhao">￥</text> -->
            <view class="price">{{ item.price }}</view>
          </view>
          <view class="number">{{ item.num }}</view>
        </view>
      </view>
    </view>
    <view class="order_box">
      <view class="line">
        <view class="left">订单编号</view>
        <view class="right">{{ orderDetail.order_sn }}</view>
      </view>
      <view class="line">
        <view class="left">退款金额</view>
        <view class="right">¥{{ orderDetail.refund_fee }}</view>
      </view>
      <view class="line">
        <view class="left">申请时间</view>
        <view class="right">{{ orderDetail.createtime }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',

  data: () => ({
    orderDetail: {},
    processType: 2, //1为退款受理，2为退款入账
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad() {},
  mounted() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getOrderDetail();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    // 订单详情
    getOrderDetail() {
      this.$http('v1.getOrderDetail', {
        id: this.$Route.query.id,
      }).then((res) => {
        if (res.code === 1) {
          this.orderDetail = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.after_sales {
  padding-bottom: 20rpx;
  .top {
    width: 750rpx;
    height: 200rpx;
    background-color: #a084f0;
    padding-left: 62rpx;
    padding-top: 42rpx;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    .top_line {
      .leixing {
        font-size: 40rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 700;
        color: #ffffff;
      }
    }
    .bottom_line {
      font-size: 22rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 18rpx;
    }
  }
  .message_box {
    width: 690rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    margin: -30rpx 30rpx 0;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    .message_top {
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #f7f6f7;
      .title {
        height: 80rpx;
        margin-left: 37rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 80rpx;
        margin-left: 50rpx;
        .price {
          font-size: 28rpx;
          font-family: DIN-Bold;
          font-weight: 700;
          color: #3d3d3d;
          &::before {
            content: '￥';
            font-size: 28rpx;
            font-family: DIN-Bold;
            font-weight: 400;
            color: #3d3d3d;
          }
        }
        .time {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #3d3d3d;
          line-height: 17rpx;
        }
      }
    }
    .message_center {
      width: 100%;
      height: 95rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #f7f6f7;
      .title {
        margin-left: 37rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right_box {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #3d3d3d;
        margin-left: 50rpx;
      }
    }
    .message_bottom {
      width: 100%;
      height: 185rpx;
      .title {
        margin-left: 37rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
        margin-top: 38rpx;
      }
      .steps_box1 {
        margin: 10rpx 44rpx 0;
        width: 602rpx;
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        position: relative;
        .process_box {
          width: 34%;
          height: 120rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          .circle_box1 {
            width: 12rpx;
            height: 12rpx;
            position: relative;
            background: #a084f0;
            border-radius: 50%;
          }
          .circle_box2 {
            width: 12rpx;
            height: 12rpx;
            position: relative;
            border: 1rpx solid#A084F0;
            border-radius: 50%;
            u-icon {
              display: none;
            }
          }
          .type1 {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #a084f0;
          }
          .type2 {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #d7c9ff;
          }
        }
        .xian {
          width: 388rpx;
          height: 6rpx;
          background: #d7c9ff;
          position: absolute;
          top: 30rpx;
          left: 107rpx;
        }
      }
      .steps_box2 {
        margin: 10rpx 44rpx 0;
        width: 602rpx;
        height: 120rpx;
        display: flex;
        justify-content: space-between;
        position: relative;
        .process_box {
          width: 34%;
          height: 120rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          .circle_box1 {
            width: 12rpx;
            height: 12rpx;
            position: relative;
            background: #a084f0;
            border-radius: 50%;
          }
          .circle_box2 {
            width: 40rpx;
            height: 40rpx;
            background: #a084f0;
            position: relative;
            border-radius: 50%;
            text-align: center;
            line-height: 40rpx;
          }
          .type1 {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #a084f0;
          }
          .type2 {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #a084f0;
          }
        }
        .xian {
          width: 388rpx;
          height: 6rpx;
          background: #a084f0;
          position: absolute;
          top: 30rpx;
          left: 107rpx;
        }
      }
    }
  }
  .detail_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
    margin: 18rpx 30rpx;
    padding: 34rpx 28rpx 24rpx 36rpx;
    .center {
      height: 180rpx;
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #fff;
      .img_box {
        width: 122rpx;
        height: 122rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .right {
        flex: 1;
        margin-left: 20rpx;
        .right_top {
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 28rpx;
            font-family: Source Han Sans CN-Normal, Source Han Sans CN;
            font-weight: 700;
            color: #111111;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 350rpx;
            margin-left: 10rpx;
          }
          .price {
            font-size: 28rpx;
            font-family: DIN-Bold;
            font-weight: 700;
            color: #de3249;
            &::before {
              content: '￥';
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #de3249;
            }
          }
        }
        .number {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          margin-top: 50rpx;
          text-align: right;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 700;
          color: #111111;
          padding-right: 20rpx;
          &::before {
            content: 'x';
            font-weight: 400;
          }
        }
      }
    }
  }
  .order_box {
    width: 690rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 30rpx 10rpx;
    padding-top: 16rpx;
    padding-right: 28rpx;
    padding-left: 28rpx;
    height: 205rpx;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    .line {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right {
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #939393;
      }
    }
  }
}
</style>
